<%@page import="model.UserAccount"%>
<%@page import="model.Employee"%>
<%@page import="java.util.ArrayList"%>    
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="./css/style.css" />
<link type="text/css" rel="stylesheet" href="./jsDatePick_ltr.min.css" />
<title>Insert title here</title>
<script src="./script.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="./jsDatePick.jquery.min.1.3.js"></script>
</head>
<body>
	<a href=".">Back</a>
	<script type="text/javascript">
		window.onload = function(){			
			new JsDatePick({ useMode:2, target:"valid_from",	dateFormat:"%F %d, %Y" });
			new JsDatePick({ useMode:2, target:"valid_to",	dateFormat:"%F %d, %Y" });
			$('#add_new_user').hide();
		};
		
		 //INSERT NEW ENTERPRISE
	    $(function() {  
	        $("#insert_user").click(function() {	        	
	        	$.ajax({
	        		  type: 'POST',
	        		  url: './usermanage',
	        		  data: $('#user_insert_form').serialize(),
	        		  success : function(){	        			  
	        			  location.reload(true);
	        		  }
	        	});	        	
	        });    
	    });   
		 
	  	//DELETE ENTERPRISE
	    function deleteUser(id){	    	 
			$.ajax({
				type : 'POST',
				url : './usermanage?delete=true',
				data : 'id='+id,
				success : function(data){ 
					message(data.message, data.classType);					
					$('#user' + id).fadeOut();
				},					
				error : function() {
					alert('Error');
				},
				dataType: 'json'
			});
		}
	  	
	    function message(string, classType){
			$("#message").hide();
	    	$("#message").fadeIn();
			$("#message").text(string);
			$("#message").removeClass();
			$("#message").addClass(classType);
		}
	</script>
	<p class="error" id="message"></p>
	<div id="add_new_user">		
		<form id="user_insert_form" name="user_insert_form">
			<table>
				<tr><td>User name</td><td><input type = "text" name ="user"></input></td></tr>
				<tr><td>password</td><td><input type = "password" name = "pass"></input></td></tr>
				<tr><td>Employee</td><td>
					<select name = "employee">
					<% 
						ArrayList<Employee> elist = (ArrayList<Employee>)request.getAttribute("employees");
						for(Employee e: elist){
							out.println("<option value = "+e.getId()+">"+e.getPersonObject()+"("+e.getEnterpriseObject().getName()+")"+"</option>");
						}					
					%>									
					</select>				
				</td></tr>
				<tr><td>Valid from</td><td><input type = "text" name = "valid_from" id="valid_from"></input></td></tr>
				<tr><td>Valid to</td><td><input type = "text" name = "valid_to" id="valid_to"></input></td></tr>
				<tr><td><input id="insert_user" type="button" value="Submit"></td><td></td></tr>
			</table>
			
		</form>
	</div>
	<a href="#" id="show_add_button" onclick="show('add_new_user', 'show_add_button')">Add new user</a>	
	<table>
		<% 	
		ArrayList<UserAccount> list = ((ArrayList<UserAccount>)request.getAttribute("users"));
		for(UserAccount u: list){
			out.println("<tr id=\"user"+u.getId()+"\"><td><a href=\"./user?edit="+u.getId()+"\">"
				+u.getUsername()+"</a></td><td><a href=\"#\" class=\"delete\" onclick=\"deleteUser('"+u.getId()+"')\">delete</a></td></tr>");
		} 
		%>
	</table>
</body>
</html>